<template>
  <el-row style="margin-top: 10px" v-if="queryListData.action == 'getlist'">
    <el-col :span="24">
      <el-pagination
              background
              v-model:currentPage="queryListData.startnum"
              :page-sizes="[10, 25, 50, 100]"
              :page-size="queryListData.pagenum"
              layout="prev, pager, next, sizes, total"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-col>
  </el-row>
</template>

<script>
  import {toRef} from "vue";
  export default {
    name: "FolderPagination",
    props: {
      queryList: {
        type: Object,
        default() {
          return {
            startnum: 1,
            pagenum: 10,
            keyword: ''
          }
        }
      },
      total: {
        type: Number,
        default: 0
      }
    },
    emits: ['pagination'],
    setup(props, context) {
      const queryListData = toRef(props, 'queryList')

      const handleSizeChange = (val) => {
        queryListData.value.pagenum = val
        context.emit('pagination', queryListData.value)
      }
      const handleCurrentChange = (val) => {
        queryListData.value.startnum = val
        context.emit('pagination', queryListData.value)
      }
      return {
        queryListData,
        handleSizeChange,
        handleCurrentChange
      }
    }
  }
</script>

<style scoped>

</style>
